<template lang="wxml" >
	<view class="content" :style="{'height':height,'overflow':'hidden'}">
		<!-- 顶部搜索 -->
		<search @send="send"></search>

		<!-- 轮播图 -->
		<swiper class="banner" indicator-dots autoplay circular indicator-color="rgba(255, 255, 255, .5)" indicator-active-color="#fff">
			<swiper-item v-for="item in bannerList" :key="item.goods_id" >
				<navigator :url="'/pages/goods/index?id=' + item.goods_id">
					<image :src="item.image_src"></image>
				</navigator>
			</swiper-item>	
		</swiper>
		
		<!-- 导航区 -->
		<view class="nav" >
			<navigator url="" class="item" v-for="item in navList" :key="item.name">
				<image :src="item.image_src"></image>
			</navigator>	
		</view>

		<!-- 楼层 -->
		<view class="floors" >
			<view class="floor" v-for="(item,index) in floorsList" :key="index">
				<!-- 标题 -->
				<view class="header">
					<image :src="item.floor_title.image_src"></image>
				</view>
				<!-- 楼层内容-->
				<view class="imgs">
					<navigator url=""  v-for="product in item.product_list" :key="product.name">
						<image :src="product.image_src"></image>
					</navigator>
					
				</view>

			</view>
		</view>

		<!-- 回到顶部 -->
		<view class="goTop icon-top" @tap="goTop" v-if="isShow"></view>
	</view>
</template>

<script>
import search from "@/components/search.vue";
export default {
  components: {
    search
  },
  data() {
    return {
      height: "auto",
      bannerList: [],
      navList: [],
      floorsList: [],
      isShow: false
    };
  },
  onLoad() {
    this.getBanner();
    this.getNav();
    this.getFloors();
  },
  // 小程序的生命周期函数
  async onPullDownRefresh() {
    // 用户下拉时执行
    await this.getBanner();
    await this.getNav();
    await this.getFloors();

    // 关闭加载效果 异步执行
    uni.stopPullDownRefresh();
  },
  // 监听滚动条
  onPageScroll(e) {
    // console.log(e.scrollTop);
    if (e.scrollTop > 200) {
      this.isShow = true;
    } else {
      this.isShow = false;
    }
  },
  methods: {
    goTop() {
      // API 回到顶部
      uni.pageScrollTo({
        scrollTop: 0
      });
    },
    // 获取楼层
    async getFloors() {
      const { message } = await this.$request({
        api: "/api/public/v1/home/floordata"
      });
      this.floorsList = message;
      //   console.log(message);
    },
    // 获取导航数据
    async getNav() {
      const { message } = await this.$request({
        api: "/api/public/v1/home/catitems"
      });

      this.navList = message;
    },
    // 获取轮播图
    async getBanner() {
      const { message } = await this.$request({
        api: "/api/public/v1/home/swiperdata"
      });
      this.bannerList = message;
      //   console.log(this.banner);
    },
    send(e) {
      // 解决高度问题：
      // 3.拿到数据怎么办？
      //    3.1 vue语法数据（初始化）绑定 ；高度是auto,设置溢出隐藏无效
      //    3.2 设置初始化数据
      this.height = e.pageHeight;
      // console.log(this.height);
    }
  }
};
</script>

<style lang="less">
// 轮播图
.banner {
  height: 340rpx;
  image {
    width: 750rpx;
    height: 340rpx;
  }
}
// 导航栏
.nav {
  display: flex;
  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    image {
      width: 128rpx;
      height: 140rpx;
      margin: 30rpx 0;
    }
  }
}
// 楼层
.floors {
  // 公共楼层
  .floor {
    .header {
      box-sizing: border-box;
      padding-top: 20rpx;
      padding-left: 16rpx;
      background-color: #f4f4f4;
      image {
        height: 60rpx;
        width: 100%;
      }
    }
    .imgs {
      box-sizing: border-box;
      padding: 20rpx 12rpx;
      overflow: hidden;
      navigator {
        float: left;
        margin-right: 10rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      navigator:nth-child(1) {
        width: 232rpx;
        height: 386rpx;
      }
      navigator:nth-child(2),
      navigator:nth-child(5) {
        width: 273rpx;
        height: 188rpx;
      }
      navigator:nth-child(3),
      navigator:nth-child(4) {
        width: 203rpx;
        height: 188rpx;
      }
      // 3 5 margin-right不要10
      navigator:nth-child(3),
      navigator:nth-child(5) {
        margin-right: 0;
      }
      // 2 3 margin-bottom 10
      navigator:nth-child(2),
      navigator:nth-child(3) {
        margin-bottom: 10rpx;
      }
    }
  }
  // 第一楼层
  .floor:nth-child(1) {
    .imgs {
      // 1
      navigator:nth-child(1) {
        width: 232rpx;
        height: 386rpx;
      }
      // 2 3 4 5 都是一个大小 ； n 从0开始
      navigator:nth-child(n + 2) {
        width: 236rpx;
        height: 188rpx;
      }
    }
  }
}

.goTop {
  position: fixed;
  bottom: 30rpx;
  bottom: 65rpx;
  right: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100rpx;
  height: 100rpx;
  font-size: 48rpx;
  color: #666;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
}
</style>
